<template>
  <div class="header">
    <div class="time">
      <div class="tabTitle">{{getTabTitle.name}}</div>
      <TimePeriod></TimePeriod>
    </div>
    <div class="nav-list">
      <el-link
        type="primary"
        v-for="obj in menuTabs"
        :key="obj.path"
        @click="tabClick(obj)"
      >{{obj.name}}</el-link>
    </div>
  </div>
</template>

<script>
import TimePeriod from "../components/TimePeriod";
import { fetchGet } from "../https";

export default {
  name: "Header",
  components: {
    TimePeriod
  },
  mounted() {
    this.initTopMenu();
  },
  data() {
    return { menuTabs: [] };
  },
  computed: {
    getTabTitle() {
      return this.$store.state.tabTitle;
    }
  },
  methods: {
    tabClick(obj) {
      this.$store.commit("SET_TITLE", obj);
      this.$router.push(obj.path);
    },
    initTopMenu() {
      var data = fetchGet("/menu/top-menu");
      data.then(res => {
        const menuData = res.data.data.map(element => {
          return {
            path: element.menuPath,
            name: element.menuTitle
          };
        });
        this.menuTabs = menuData;
        var path = this.$route.path;
        var filter = this.menuTabs.filter(item => path.indexOf(item.path) > -1);
        this.$store.commit("SET_TITLE", filter[0]);
      });
    }
  }
};
</script>

<style scoped>
.time {
  display: flex;
  justify-content: space-between;
}

.time .tabTitle {
  font-size: 24px;
  padding: 20px;
}

.el-link {
  font-size: large;
  font-family: Arial;
  width: 12%;
}

.nav-list {
  display: flex;
  justify-content: space-around;
  height: 40px;
  background-color: lightgreen;
}
</style>
